<script setup lang="ts">
import { onMounted } from 'vue';
import MySubjectList from './components/MySubjectList.vue';
import { router } from '@/router';
import SubjectList from './components/SubjectList.vue';

onMounted(() => {
    document.body.addEventListener('touchstart', () => {}, { passive: true });
})

const back = () => {
    console.log("我要准备返回了嘛？")
    router.push('/home');
}
</script>

<template>
    <div class="container">
        <div class="header">
            <div class="icon">
                <van-icon @click="back" name="arrow-left" size="24" />
            </div>
            <div class="title">
                题目集列表
            </div>
        </div>
        <div class="content">
            <MySubjectList style="height: 50%;"></MySubjectList>
            <SubjectList style="height: 50%;"></SubjectList>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    background-color: #f5f5f5;
    position: relative;
    overflow: hidden;
}

.header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background-color: white;
    border-bottom: 1px rgba(0, 0, 0, 0.1) solid;
    position: relative;
    height: 30px;
    z-index: 10;
    flex-shrink: 0; /* 防止header被压缩 */
    
    .icon {
        position: absolute;
        left: 16px;
        z-index: 1;
        height: 40px;
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .title {
        flex: 1;
        text-align: center;
        font-size: 18px;
        font-weight: 500;
    }
}

.content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px;
    overflow: hidden;
    position: relative;
    -webkit-overflow-scrolling: touch;
}
</style>